<html>

<%
daily = lists.select{|i| i[:type]=='daily'}.sort{|l,r|r[:time]<=>l[:time]}
weekly = lists.select{|i| i[:type]=='weekly'}.sort{|l,r|r[:time]<=>l[:time]}
monthly= lists.select{|i| i[:type]=='monthly'}.sort{|l,r|r[:time]<=>l[:time]}
%>

<head>
  <title>ZeroPageBackup Information</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table', 'barchart']});
    </script>
    <script type="text/javascript">
      google.setOnLoadCallback(function(){
        document.getElementById("raw").style.display="none";
      });

<% [ ['daily',daily],['weekly', weekly], ['monthly',monthly]].each do |type, items| %>
      google.setOnLoadCallback(draw<%=type%>);

      function draw<%=type%>() {
        // Create and populate the data table.
        var <%=type%>_data = new google.visualization.DataTable();
        <%=type%>_data.addColumn('string', 'type');
        <%=type%>_data.addColumn('string', 'name');
        <%=type%>_data.addColumn('string', 'time');
        <%=type%>_data.addColumn('string', 'size');
        <%=type%>_data.addColumn('number', '<%= type=='daily'?'KB':'MB'%>');
        <%=type%>_data.addColumn('string', 'state(MD5)');

        <%=type%>_data.addRows(<%=items.size%>);

 <% items.each_with_index do|n,i| %>
        c = 0
        <%=type%>_data.setCell(<%=i%>, c++, '<%= n[:type]%>');
        <%=type%>_data.setCell(<%=i%>, c++, '<%= n[:name]%>');
        <%=type%>_data.setCell(<%=i%>, c++, '<%= n[:time]%>');
        <%=type%>_data.setCell(<%=i%>, c++, '<%= hsize n[:size]%>');
        <%=type%>_data.setCell(<%=i%>, c++, <%= n[:size]/(1024**(type=='daily'?1:2))%>);
        <%=type%>_data.setCell(<%=i%>, c++, '<%= n[:state]%>');
 <% end %>

        var formatter = new google.visualization.TableNumberFormat({});
        formatter.format(<%=type%>_data, 5); // Apply formatter to second column

        // Create and draw the visualization.
        var <%=type%>_table= new google.visualization.Table(document.getElementById('<%=type%>_table'));
        <%=type%>_table.draw(<%=type%>_data, {showRowNumber : true });

        var view = new google.visualization.DataView(<%=type%>_data);
        view.setColumns([1,4]);

        var <%=type%>_chart = new google.visualization.BarChart(document.getElementById('<%=type%>_chart_sort_div'));
        <%=type%>_chart.draw(view);

        google.visualization.events.addListener(<%=type%>_table, 'sort',
          function(event) {
            <%=type%>_data.sort([{column: event.column, desc: !event.ascending}]);
            <%=type%>_chart.draw(view);
          });
      }
<% end %>
    </script>
  </head>
   

<body>
  <h2 style="font-family: Arial,Helvetica,sans-serif">ZeroPageBackup Information</h2>

<% [ ['daily',daily],['weekly', weekly], ['monthly',monthly]].each do |type, items| %>
  <h3 style="border-top: solid 1px #CCC;margin-top:20px;font-family: Arial,Helvetica,sans-serif"><%=type%></h3>
  <div id="<%=type%>_table" style="width:960px"></div>
  <div id="<%=type%>_chart_sort_div" style="margin-top:10px;width: 960px; height: <%=20+items.size*15%>px;"></div>
<%end %>


  <table id="raw">
    <tr>
      <th>type</th>
      <th>name</th>
      <th>size</th>
      <th>time</th>
      <th>state(MD5)</th>
    </tr>
  <% lists.each do|n| %>
    <tr>
      <td><%= n[:type]%></td>
      <td><%= n[:name] %></td>
      <td><%= hsize n[:size]%></td>
      <td><%= n[:time] %></td>
      <td><%= n[:state] %></td>
    </tr>
  <% end %>
  </table>
</body>
</html>
